<template>
	<view class="search_view">
		<view class="search_content">
			<image src="../../static/search.png" mode="" class="search_logo"></image>
			<input v-model="searchQuery" type="text" class="search_input" placeholder="请输入品牌名称" />
			<button class="search_btn" @click="handleSearch">搜索</button>
		</view>


		<scroll-view scroll-y="true" @scrolltolower="getSearch" class="scroll-view">
			<view class="listItem" v-for="(item,index) in carList " :key='index' @click="goDetail(item)">
				<view class="brandimg">
					<image :src='item.image' mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="card_details">
					<view class="card_tp_title">
						{{item.name}}
					</view>

					<view class="card_tp_rmb">
						回收价: <text class="card_rmb_num">￥{{ item.buyPrice }}</text>
						补贴: <text class="card_rmb_num">￥{{ item.subsidy }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- <view class="search_list">
			<view v-if="searchResults.length > 0">
				<view v-for="(item, index) in searchResults" :key="index" class="search_item">
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view v-else>
				<view class="">
					<text>历史搜索</text>
					<image src="" mode=""></image>
				</view>
				<view class="">

				</view>
			</view>
		</view> -->
	</view>
</template>


<script>
	import {
		getCardBrandList
	} from '@/api.js'
	export default {
		data() {
			return {
				searchQuery: '', // 搜索输入框的内容
				searchResults: [], // 搜索结果
				pageNo: 1, //页面偏移量
				pageSize: 10, //每页数量
				total: 0, //总数量
				carList: [], //搜索结果
				dateNone: false, //数据是否到底了
				scrollview_height: 0,
			}
		},
		methods: {
			// 搜索按钮点击事件
			async handleSearch() {
				this.dateNone = false
				this.pageNo = 1
				if (this.searchQuery.trim() === '') {
					uni.showToast({
						title: '请输入品牌名称',
						icon: 'none'
					});
					return;
				}
				// 调用搜索接口
				this.getSearch();
			},
			// 跳转卡券详情
			goDetail(item) {
				console.log('item', item);
				// let obj = {
				// 	lifespan: item.lifespan,
				// 	name: item.name,
				// 	buyPrice: item.buyPrice,
				// 	image: item.image,
				// 	id: item.id,
				// 	subsidy: item.subsidy,
				// 	uploadType: 2

				// }
				// uni.navigateTo({
				// 	url: `/pages/uploadCoupons/uploadCoupons?params=${JSON.stringify(obj)}`
				// })
				// return
				if (uni.getStorageSync('token')) {
					let obj = {
						lifespan: item.lifespan,
						name: item.name,
						buyPrice: item.buyPrice,
						image: item.image,
						id: item.id,
						subsidy: item.subsidy,
						uploadType: item.uploadType
					}
					uni.navigateTo({
						url: `/pages/uploadCoupons/uploadCoupons?params=${JSON.stringify(obj)}`
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
						complete() {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}, 2000)
						},
					});
				}
			},

			// 搜索功能，获取搜索结果
			async getSearch() {
				if (this.dateNone) {
					return
				}
				const res = await getCardBrandList({
					oneId: '',
					brandId: '',
					name: this.searchQuery,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				});
				this.total = res.result.total
				if (this.pageNo === 1) {
					this.carList = res.result.records
				} else {
					this.carList = this.carList.concat(res.result.records)
				}
				console.log('this.carList', this.carList);
				if (this.pageNo > 1 && this.total <= (this.pageNo * this.pageSize)) {
					this.dateNone = true
				} else {
					this.dateNone = false
					this.pageNo = this.pageNo + 1
				}

			},
		}
	}
</script>


<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.search_view {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.search_content {
		display: flex;
		position: relative;
		width: 100%;
		height: 100rpx;
		margin: 10rpx;
		padding: 20rpx;
		overflow: hidden;
		background-color: #ffffff;
	}

	.search_logo {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		top: 55rpx;
		left: 60rpx;
		transform: translate(-50%, -50%);
	}

	.search_input {
		padding: 10rpx 70rpx;
		width: 570rpx;
		height: 65rpx;
		border: 1px solid #e2e3e6;
		border-radius: 50rpx;
		font-size: 30rpx;
		background-color: ##ffffff;
	}

	.search_btn {
		margin-left: 10rpx;
		width: 120rpx;
		height: 65rpx;
		line-height: 65rpx;
		border-radius: 60rpx;
		font-size: 24rpx;
		color: #fcfeff;
		background-color: #3c9cff;
	}

	.search_list {
		padding: 20rpx;
		background-color: #fff;
	}

	.search_item {
		padding: 15rpx;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
		color: #333;
	}

	.scroll-view {
		display: block;
		width: 100vw;
		height: calc(100vh - 120rpx);
	}

	.listItem {
		height: 120rpx;
		width: 710rpx;
		background: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
	}

	.brandimg {
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx 20rpx;
		border-radius: 50rpx;
		overflow: hidden;
	}

	.red {
		color: red;
	}

	.card_details {
		flex: 1;
		font-size: 26rpx;
	}

	.card_tp_title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.card_tp_rmb {

		margin-top: 10rpx;
	}

	.card_rmb_num {
		font-size: 30rpx;
		font-weight: bold;
		color: #ff0604;
	}
</style>